<template>
  <div class="title_head background_box border_bottom">
    <i class="iconfont icon-fanhui icon_back" v-if="!shop&&!hiddenBack" @click="goToPageBack()" name="arrow-left"> </i>
    <div class="titleClass">
    <div class="title_box"> <div class="title_name"> {{ title }}</div> <div> <slot name="title_right">
        </slot></div> </div>
      <slot name="sub">
      </slot>
    </div>
    <div class="left_icon">
      <div  class="img_box">
        <slot name="right">
        </slot>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useStore } from "vuex";
import { ref, reactive, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
const props = defineProps({
  messageSum: {
    type: [String, Number],
    default: 0,
  },
  url: {
    type: String,
    default: '',
  },
  hiddenBack:{
    type: Boolean,
    default: false,
  },
  shop: {
    type: Boolean,
    default: false,
  },
  isGoBack: {
    type: Boolean,
    default: false,
  },
  goBack:{
    type:Function,
    default:()=>{
      
    }
  },
  title: {
    type: String,
    default: '',
  },
})
const goToPage = (value) => {
  router.push({
    name: value
  })
}
const goToPageBack = (value) => {
  if (props.url) {
    router.push({
      name: props.url
    })
  }else if(props.isGoBack){
    props.goBack()
  }else {
    router.go(-1);
  }
};
</script>
<style lang="scss" scoped>
.title_head {
  height: 40px;
  text-align: center;
  display: flex;
  max-width: 10rem;
  box-sizing: border-box;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  // left: 50%;
  // transform: translateX(-50%);
  font-size: 12px;
  z-index: 7;
  top: 0;

  .titleClass {
   
    font-size: 13px;
    font-weight: bold;
    font-family: '微软雅黑';
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .title_box{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .title_name{
    max-width: 7rem;
      overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2; 

    }
  }

  .left_icon {
    position: absolute;
    z-index: 50;
    right: 5px;
    top: 10px;
    font-size: 16px;
    display: flex;
    align-items: center;

    .img_box {
      display: flex;
      align-items: center;
      position: relative;
      justify-content: center;
      border-radius: 50%;
      min-width: 22px;
      height: 22px;

      // &:hover {
      //   background: rgba(0,0,0,0.1);
      // }

      .message_tip {
        position: absolute;
        right: 2px;
        top: -4px;
        line-height: 10px;
        height: 10px;
        background: red;
        transform: scale(0.8);
        padding: 0 6px;
        border-radius: 9px;
        font-size: 8px;
      }
    }

    img {
      height: 14px;
    }
  }

  .icon_back {
    position: absolute;
    z-index: 50;
    left: 10px;
    top: 14px;
    // color: #333;
    font-size: 16px;
    display: flex;
    align-items: center;

    .back {
      font-size: 0.32px;
      margin-left: 5px;
    }
  }
}

.set_img {
  height: 14px;
}</style>
  